<%--
  Created by IntelliJ IDEA.
  User: LLS
  Date: 2019/12/12
  Time: 20:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>内部数据源</title>
    <link rel="stylesheet" href="/lib/layui/layui/css/layui.css">
    <script type="text/javascript" src="/lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="/lib/layui/layui/layui.all.js"></script>
    <script type="text/javascript" src="/js/jquery/jquery-1.9.1.js"></script>
    <script src="../js/base/base.js" type="text/javascript" charset="utf-8"></script>

</head>
<style type="text/css">
    .center{ text-align:center}
    .ry {
        /*display: inline-block;*/
        margin-bottom: 10px;
        height: 92px;
        margin-top: 37px;
        margin-left: 35px;
    }
    .controls textarea.inText {
        width: 230px;
    }
    .controls textarea.inText {
        display: inline-block;
        float: left;
        border: 1px solid #d9d9d9;
        height: 55px;
        color: #999999;
        padding-left: 3px;
        text-align: left;
        font-size: 12px;
    }
    textarea {
        min-height: 85px;
    }
    textarea {
        margin: 0;
        font-family: Microsoft yahei,Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
    }
 /*   .controls div {
        display: inline-block;
        float: left;
        font-size: 14px;
        color: #207bd6;
        margin-left: 10px;
        margin-top: 20px;
        cursor: pointer;
    }*/
    .controls .xuan{
        font-size: 14px;
        color: #207bd6;
        cursor: pointer;
    }
</style>
<body>
<div style="padding-top: 10px;">
    <div class="layui-form center" style="margin:0 auto;">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">数据源名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="dataName" lay-verify="dataName" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">数据源描述</label>
                <div class="layui-input-inline">
                    <input type="text" name="dataDescription" lay-verify="dataDescription" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button id="search" type="button" class="layui-btn">查询</button>
                </div>
            </div>
        </div>
    </div>

    <div style="margin-left: 10px;">
        <button type="button" name="addbtnData" class="layui-btn">新建数据源</button>
    </div>

    <%--数据表格--%>
    <div>
        <table id="internaltable" lay-filter="internalFilter"></table>
    </div>
</div>

</body>
<script type="text/html" id="dataMenu">
    <div >
        <button type="button" class="layui-btn  layui-btn-xs" lay-event="Browse">浏览</button>
        <button type="button" class="layui-btn  layui-btn-xs" lay-event="edit">编辑</button>
        <button type="button" class="layui-btn  layui-btn-xs" lay-event="Export">导出</button>
        <button type="button" class="layui-btn  layui-btn-xs" lay-event="Import">导入</button>
        <button type="button" class="layui-btn  layui-btn-xs" lay-event="Clear">清空</button>
        <button type="button" class="layui-btn  layui-btn-xs" lay-event="seting">设置管理员</button>
        <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
    </div>
</script>
<script type="application/javascript">
    var table,form,layer,upload; //layer实例参数
    var onetable,browseTabs; //第一实例 ，第二实例

    //导入
    function Import(data) {
        layer.open({
            type: 1,
            area: ['531px', '372px'], //宽高
            title:'导入数据',
            maxmin:true,
            btn: ['确定'], //可以无限个按钮
            content: '<div style="margin: 43px auto;">' +
            '<form class="layui-form" action="">\n' +
            '  <div class="layui-form-item">\n' +
            '    <label class="layui-form-label" style="width: 30%;">下载导入模板：</label>\n' +
            '    <div class="layui-input-block">\n' +
            '      <a class="layui-form-mid" style="text-decoration: underline; color: blue;">下载模板</a>\n' +
            '    </div>\n' +
            '  </div>\n' +
            '  <div class="layui-form-item">\n' +
            '    <label class="layui-form-label" style="width: 30%;">选择导入文件：</label>\n' +
            '    <div class="layui-input-inline" style="width: 87px;">\n' +
            '      <button type="button" class="layui-btn layui-btn-sm" id="test1">\n' +
            '       <i class="layui-icon">&#xe67c;</i>上传文件\n' +
            '       </button>' +
            '    </div>\n' +
            '    <div class="layui-form-mid layui-word-aux" id="textfilter">未选择文件</div>\n' +
            '  </div>' +
            '  <div class="layui-form-item">\n' +
            '    <label class="layui-form-label" style="width: 30%;">格式说明：</label>\n' +
            '    <div class="layui-form-mid layui-word-aux">1.导入数据源只支持xls、xlsx格式</div>\n' +
            '  </div>' +
            '</form>' +
            '</div>',
            success:function () {
                //上传
                //执行实例
                var uploadInst = upload.render({
                    elem: '#test1' //绑定元素
                    ,url: '/TerpServerController/terpServerImportExcel' //上传接口
                    ,accept:'file'
                    ,auto:false
                    ,bindAction: '.layui-layer-btn0'
                    ,data:{tableName:data.dName}
                    ,choose: function(obj){
                        //将每次选择的文件追加到文件队列
                        var files = obj.pushFile();
                        obj.preview(function(index, file, result) {
                            console.log(index); //得到文件索引
                            console.log(file); //得到文件对象
                            console.log(result); //得到文件base64编码，比如图片
                            $("#textfilter").text(file.name);
                        });
                        console.log(files);
                    }
                    ,done: function(res){
                        //上传完毕回调
                        onetable.reload();
                    }
                    ,error: function(){
                        //请求异常回调
                        layer.msg("请上传正确的附件信息");
                    }
                });
            },
            yes: function(index, layero){
                layer.close(index);
            }
        });
    }

    //导出
    function Export(data){
        window.location.href="<%=basePath%>/TerpServerController/terpServerExportExcel?tableName="+data.dName;
    }

    //浏览数据源
    function browse(data) {
    layer.open({
        type: 1,
        area: ['860px', '500px'], //宽高
        title:'浏览数据源',
        maxmin:true,
        content: '<div style="margin-left: 10px; margin-top: 10px;">\n' +
        '        <button type="button" name="addbtnbrowse" class="layui-btn layui-btn-sm">添加数据</button>\n' +
        '    </div>\n' +
        '    <div style="margin-left: 10px; margin-right: 10px;">\n' +
        '        <table id="browsetable" lay-filter="browseFilter"></table>\n' +
        '    </div>',
        success:function () {
            var obj;
            $.get('/TerpServerController/findByDataSrcId',{dId:data.dId},function(res){
                if (res.flag){
                     obj=res.object;
                    //渲染动态表格
                    browseTab(obj);
                    //添加属性
                    $('button[name="addbtnbrowse"]').attr('data_type',obj.dName);
                }
            });

            //浏览里面 添加数据点击事件
            $('button[name="addbtnbrowse"]').click(function() {
                addbtnbrowse(obj);
            });
        }
    });
}

    //浏览里面 添加数据点击事件
    function addbtnbrowse(obj) {
        var list=obj.list;
        layer.open({
            type: 1,
            area: ['370px', '300px'], //宽高
            title:'浏览数据源',
            maxmin:true,
            shade: 0,
            content: '<div style="margin:10px;">\n' +
            '<form class="layui-form" name="browseform">\n' +
            '</form>'+
            '    </div>',
            btn: ['确定'], //可以无限个按钮
            success:function (layero, index) {
                //忽略第一条
                for (var i=1;list.length>i;i++){
                    var input='  <div class="layui-form-item" style="margin-right: 55px;">\n' +
                        '    <label class="layui-form-label">'+list[i].data3+'</label>\n' +
                        '    <div class="layui-input-block">\n' +
                        '      <input type="text" name="'+list[i].data1+'" data_type="'+list[i].data2+'" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">\n' +
                        '<span style="color: red;">'+respan(list[i].data2)+'</span>'+
                        '    </div>\n' +
                        '  </div>';
                    $('form[name="browseform"]').append(input);
                }
                form.render(); //更新全部
            },
            yes: function(index, layero){
                //按钮【按钮一】的回调
                var obj2=new Object();
                $('form[name="browseform"] input').each(function(index,item){
                    var dataType=$(this).attr('data_type');
                    var value=$(this).val();
                    if (dataType==='int' && isNaN($(this).val())){
                        layer.msg('请输入数值', {icon: 6});
                        return false;
                    }else if ($(this).val()===''){
                        value=0;
                    }
                    obj2[$(this).attr('name')]=value;
                });
                $.post('/TerpServerController/insertData',{tableName:obj.dName,strjson:JSON.stringify(obj2)},function(res){
                    if (res.flag){
                        browseTabs.reload();
                        layer.close(index);

                    }
                });
            }
        });
    }
    function respan(item) {
            if (item==='int'){
                return '（需填写数字）';
            }
        return '';
    }
//浏览的动态数据表格
    function browseTab(obj) {
        var list=obj.list
        var cols=[[]]; //表头
        var data=[]; //数据

        //忽略第一条
        for (var i=1;list.length>i;i++){
            var obj2={
                field:list[i].data1,
                title: list[i].data3,
                edit:true
            }
            cols[0].push(obj2);
        }

        //添加操作按钮
        var objs=new Object();
        objs["title"]='操作';
        objs["templet"]=function (d) {
            return ' <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="browsedel">删除</button>';
        };
        cols[0].push(objs);

        //渲染第二实例
        browseTabs=table.render({
            elem: '#browsetable'
            ,url:'/TerpServerController/selectTerpServerBydID'
            ,where:{dName:obj.dName}
            ,page: true //开启分页
            ,cols: cols
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.totleNum, //解析数据长度
                    "data": res.obj //解析数据列表
                };
            }
    });
    }

    //设置管理员
    function seting(data){
        layer.open({
            type: 1,
            area: ['317px', '287px'], //宽高
            title:'设置管理员',
            maxmin:true,
            content: '<div id="" class="ry">'+
            '<div class="controls">'+
            '<div style="height:100px"><textarea class="inText" id="in_text" type="text" disabled></textarea></div>'+
            '<div class="xuan" style="display:flex"><div id="add_gx"><fmt:message code="global.lang.add"/></div>'+
            '<div id="clear_gx" style="margin-left: 13px;"><fmt:message code="global.lang.empty"/></div>'+
            '</div></div>'+
            ' </div>',
            btn:['<fmt:message code="global.lang.ok"/>', '<fmt:message code="global.lang.close"/>'],
            success:function () {
                $('#in_text').attr('user_id',data.dPriv);
                $('#in_text').val(data.dPrivNames);
            },
            yes: function(){
                var dPriv=$('#in_text').attr('user_id');
                $.post('/TerpServerController/addAdministrators',{dId:data.dId,dPriv:dPriv},function(res){
                    if (res.flag){
                        closeAll();
                    }
                });
            }
        });
        $('#add_gx').click(function(){
            user_id='in_text';
            $.popWindow("../common/selectUser");
        })
        $('#clear_gx').click(function(){
            $('#in_text').val('');
            $('#in_text').attr('username','');
            $('#in_text').attr('dataid','');
            $('#in_text').attr('user_id','');
            $('#in_text').attr('userprivname','');
        })
    }

    //清空
    function clear(data){
        $.post('/TerpServerController/delectTableAllData',{tableName:data.dName},function(res){
            if (res.flag){
                layer.msg('清空成功！', {icon: 6});
                table.reload('internaltable');
            }
        });
    }

    //删除
    function del(data) {
        //eg1
        layer.confirm('确定要删除吗?', {icon: 3, title:'提示'}, function(index){
            //do something
            $.get('/TerpServerController/deleteTerpServerTwo',{dID:data.dId},function (res) {
                layer.msg('删除成功！', {icon: 6});
                onetable.reload();
            });
            layer.close(index);
        });
    }

    //新增点击事件
    $('button[name=addbtnData]').click(function(){
        addEdit('新建数据源');
    });

    //新增编辑弹框
    function addEdit(title,data) {
        var url='/TerpServerController/terpflowdata'
        if (data!=undefined){
            url+='?dId='+data.dId
        }
        layer.open({
            type: 2
            ,maxmin:true
            ,resize:false
            ,btnAlign: 'c'
            ,title: [title, 'font-size:18px;']
            ,area: ['975px', '500px']
            ,content:url
            ,btn: ['确定','上一步','下一步']
            ,yes: function(index, layero){
                //按钮【按钮一】的回调
                $(layero).find("iframe")[0].contentWindow.butclick();
            }
            ,btn2: function(index, layero){
                $(layero).find("iframe")[0].contentWindow.Previous();
                return false;
            }
            ,btn3: function(index, layero){
                $(layero).find("iframe")[0].contentWindow.Nextstep();
                return false;
            }
        });
    }

    //搜索按钮点击事件
   $('#search').click(function(){
     var dataName=$('input[name="dataName"]').val(); //数据源名称
     var dataDescription=$('input[name="dataDescription"]').val(); //数据源描述
       onetable.reload({
           where:{
               dName:dataName,
               dDesc:dataDescription
           }
       });
   });

    //关闭弹出层并刷新表格
    function closeAll() {
        layer.closeAll();
        onetable.reload();
    }

    // 参数number为毫秒时间戳，format为需要转换成的日期格式
    // 格式化日期，如月、日、时、分、秒保证为2位数
    function formatNumber (n) {
        n = n.toString()
        return n[1] ? n : '0' + n;
    }
    // 参数number为毫秒时间戳，format为需要转换成的日期格式
    function formatTime (number, format) {
        let time = new Date(number)
        let newArr = []
        let formatArr = ['Y', 'M', 'D', 'h', 'm', 's']
        newArr.push(time.getFullYear())
        newArr.push(formatNumber(time.getMonth() + 1))
        newArr.push(formatNumber(time.getDate()))

        newArr.push(formatNumber(time.getHours()))
        newArr.push(formatNumber(time.getMinutes()))
        newArr.push(formatNumber(time.getSeconds()))

        for (let i in newArr) {
            format = format.replace(formatArr[i], newArr[i])
        }
        return format;
    }

    layui.use(['layer', 'form', 'table','upload'], function(){
            table = layui.table
            ,form = layui.form
            ,layer = layui.layer
            ,upload =layui.upload;

        //第一个实例
        onetable=table.render({
            elem: '#internaltable'
            ,url: '/TerpServerController/selectTerpServerByLike' //数据接口
            ,page: true //开启分页
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.totleNum, //解析数据长度
                    "data": res.obj //解析数据列表
                };
            }
            ,cols: [[ //表头
                {field: 'dId', title: 'ID', width:80, fixed: 'left'}
                ,{field: 'dName', title: '数据源名称',width:180}
                ,{field: 'dDesc', title: '数据源描述',width:180}
                ,{field: 'dataRow', title: '行数',width:80}
                ,{field: 'datasize', title: '大小',width:80}
                ,{field: 'dEditTime',width:180, title: '最后更新时间',templet:function (d) {
                        return formatTime(d.dEditTime, 'Y-M-D h:m:s');
                    }}
                ,{title: '操作',toolbar:'#dataMenu'}
            ]]
        });




        //第一实例监听行工具事件
        //监听工具条
        //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        table.on('tool(internalFilter)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'Browse') { //浏览
                browse(data);
            }else if(layEvent === 'edit'){ //编辑
                addEdit('编辑数据源',data);
            }else if(layEvent === 'Export'){ //导出
                Export(data);
            }else if(layEvent === 'Import'){ //导入
                Import(data);
            }else if(layEvent === 'Clear'){ //清空
                clear(data);
            }else if(layEvent === 'seting'){ //设置管理员
                seting(data);
            }else if(layEvent === 'del'){ //删除
                del(data);
            }
        });


        //第二实例的编辑监听事件
        table.on('edit(browseFilter)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
           /* console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据*/
            var dName=$('button[name="addbtnbrowse"]').attr('data_type'); //获取表名
            $.post('/TerpServerController/insertData',{tableName:dName,strjson:JSON.stringify(obj.data)},function(res){
                if (res.flag){
                    browseTabs.reload();
                }
            });
        });

        //第二实例监听行工具事件
        //监听工具条
        table.on('tool(browseFilter)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            var dName=$('button[name="addbtnbrowse"]').attr('data_type'); //获取表名
            if(layEvent === 'browsedel'){ //删除
                layer.confirm('真的删除行么', function(index){
                    $.post('/TerpServerController/dropTableField',{tableName:dName,keyId:data.ds_key_id},function(res){
                        if (res.flag){
                            //直接操作属性不用渲染操作
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        }
                    });
                    layer.close(index);

                });
            }
        });
    });
</script>
</html>
